<template>
  <div class="stats-container">
    <div class="stats-charts-container">
      <div class="chart-wrapper">
        <div ref="companyCountChart" class="chart"></div>
      </div>
      <div class="chart-wrapper">
        <div ref="employeeCountChart" class="chart"></div>
      </div>
      <div class="chart-wrapper">
        <div ref="capitalChart" class="chart"></div>
      </div>
      <div class="chart-wrapper">
        <div ref="highTechChart" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, watch } from 'vue';
import { statsMixin } from '@/views/statsMixin';

export default {
  name: 'StatsContainer',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const { 
      companyCountChart, 
      employeeCountChart,
      capitalChart,
      highTechChart,
      statsData,
      renderStatsCharts 
    } = statsMixin.setup();

    // 监听数据变化
    watch(() => props.data, (newData) => {
      if (newData && newData.length > 0) {
        console.log('StatsContainer接收到数据:', newData);
        statsData.value = newData;
        setTimeout(() => {
          renderStatsCharts();
        }, 100);
      } else {
        console.warn('StatsContainer接收到空数据');
      }
    }, { immediate: true, deep: true });

    // 组件挂载后初始化图表
    onMounted(() => {
      console.log('StatsContainer已挂载，初始数据:', props.data);
      if (props.data && props.data.length > 0) {
        statsData.value = props.data;
        setTimeout(() => {
          renderStatsCharts();
        }, 100);
      }
    });

    return {
      companyCountChart,
      employeeCountChart,
      capitalChart,
      highTechChart
    };
  }
};
</script>

<style scoped>
.stats-container {
  padding: 20px 0;
}

.stats-charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 300px);
  gap: 20px;
}

.chart-wrapper {
  height: 300px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chart {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .stats-charts-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 300px);
  }
}
</style> 